import React, { Component } from 'react'
import {Table,Button,Tag,MessageBox, Form,Select,Pagination, Message, Input} from "element-react";

export default class Processpage extends Component {
    refresh = ()=>{
        fetch("/device/devicelendrecord/allpage",{
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({page:this.state.page.currentPage})
        })
        .then(data=>data.json())
        .then(result=>{
          this.setState({data:result.page.list , page :{
            total: result.page.totalPage,
            pageSize:  result.page.pageSize,
            currentPage: result.page.currPage,
          }
        })
        })
      }

      getcurrentUserinfo = () =>{
        fetch("/device/userbaiseinfo/getcurrentuserinfo").then(data=>data.json())
        .then(result=>{
            this.setState({currentUser:result.user})
        })
      }

      getstatusmap = ()=> {
        fetch("/device/devicestatusinfo/list")
        .then(data=>data.json())
        .then(result=>{
           let statusmap  = {}  
           result.list.map(el=>{
                statusmap[el.statuscode] = {
                    name : el.name ,
                    tag:el.tag ,
                    role:el.role
                }
                return el
            })
            this.statusmap  = statusmap
        })
      }


     async componentDidMount(){
        await this.getstatusmap()
        this.refresh()
        this.getcurrentUserinfo()
        this.timer = setInterval(() => {
            this.getcurrentUserinfo()
            this.refresh()
        }, 3000);
      }
      componentWillUnmount(){
        clearInterval(this.timer)
      }

      statusmap = {}

        state = {
            columns: [
              {
                fixed: 'left',
                align:"center",
                type:"index",
              },
              {
                label: "审批单号",
                prop: "id",
                width: 180,
                fixed: 'left',
                align:"center"
              },
              {
                label: "审批设备号",
                prop: "deviceid",
                width: 180,
                align:"center"
              },
              {
                label:"设备名称",
                prop:"devicename",
                align:"center",
                width: 180
              },
              {
                label: "申请人编号",
                align:"center",
                prop: "userid"
              },
              {
                label:"申请日期",
                align:"center",
                prop:"lenddate",
                width:200
              },
              {
                label: "申请人",
                align:"center",
                prop: "username"  
              },
              {
                label:"状态",
                align: 'center',
                width: 100,
                render: (row, column, index)=>{
                  return (
                    <Tag
                     type={this.statusmap[row.status].tag}
                    >{this.statusmap[row.status].name}</Tag>
                  )
                },
              },
              {
                label:"操作",
                align: 'center',
                fixed: 'right',
                width: 100,
                render: (row, column, index)=>{
                  return (
                    <span style={{display:"flex"}}>
                        <Button plain={true} 
                        type="info" 
                        size="small"
                        icon='edit'
                        disabled={
                            !(this.statusmap[row.status].role===this.state.currentUser.role)
                         }
                        onClick={this.approverRecord.bind(this,index)} ></Button>
                        {/* <Button type="danger" size="small">移除</Button> */}
                    </span>
                  )
                }
              }
            ],
            data: [],
            page:{
              currentPage:1
            },
            currentUser:{},
            rootmate:[]
        }
      approverRecord(index){
          console.log(this.state.currentUser ,this.statusmap,this.state.data )
          console.log(this.statusmap[0] , this.state.currentUser.role)
        fetch("/device/devicestatusinfo/getoption" , {
            method:"POST",
            headers:{
                "Content-Type": "application/json",
              },
              body:JSON.stringify(this.state.data[index].status)
        }).then(data=>data.json())
        .then(result=>{
            
            MessageBox.msgbox({
                message:(
                  <Form>
                    <Form.Item label='申请事由'>
                      <Input 
                      type='textarea' 
                      readOnly={true} 
                      resize={"none"}
                      size={"large"}
                      autosize={{ minRows: 6, maxRows: 6}}
                      value={this.state.data[index].msg}></Input>
                    </Form.Item>
                    <Form.Item label='意见'>
                      <Select onChange={(e)=>{this.currdevicestatus = e }}>
                          {
                              result.option.map(el=>{
                                  return (
                                    <Select.Option label={el.optionname} value={el.statuscode}/> 
                                  )
                              })
                          }
                      </Select>
                    </Form.Item>
                  </Form>
                ),
                showCancelButton:true
              }).then(action=>{
                if(action==="confirm") {
                  this.state.data[index].status = this.currdevicestatus ;
                  fetch("/device/devicelendrecord/approverprocess" , {
                    method:"POST",
                    headers:{
                      "Content-Type": "application/json",
                    },
                    body:JSON.stringify(
                        this.state.data[index]
                    )
                  }).then(data=>data.json())
                  .then(reuslt=>{
                      
                      this.setState({data:[...this.state.data]})
                      Message({
                        type:reuslt.msg,
                        message:"操作成功"
                      })
                  })
                }
              })


        })
    
      }
      approverBuyRecord = (index) =>{
        fetch("/device/devicepayinfo/getInfo" , {
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({
            id : this.state.data[index].id
          })
        })
        .then(data=>data.json())
        .then(result=>{
          console.log(result)
          MessageBox.msgbox({
            message:(
              <Form>
                <Form.Item label='设备类型'>
                <Tag type="primary">{result.info.label}</Tag>
                 {/* {result.info.label} */}
                </Form.Item>
                <Form.Item label={`单价`}>
                <Tag type="primary"> {result.info.price}{"￥"}</Tag>
                
                </Form.Item>
                <Form.Item label='总数量'>
                <Tag type="primary"> {result.info.nums}</Tag>
                
                </Form.Item>
                <Form.Item label='总金额'>
                <Tag type="primary">{result.info.nums*result.info.price}{"￥"}</Tag>
                  
                </Form.Item>
                <Form.Item label='申请事由'>
                  <Input 
                  type='textarea' 
                  readOnly={true} 
                  resize={"none"}
                  size={"large"}
                  autosize={{ minRows: 6, maxRows: 6}}
                  placeholder={"暂无事由"}
                  value={this.state.data[index].msg}></Input>
                </Form.Item>
                <Form.Item label='意见'>
                  <Select onChange={(e)=>{this.currdevicestatus = e }}>
                    <Select.Option label={"审批通过"} value={11}/>
                    <Select.Option label={ "驳回" } value={12}/>
                  </Select>
                </Form.Item>
              </Form>
            ),
            showCancelButton:true
          }).then(action=>{
            if(action==="confirm") {
              this.state.data[index].status = this.currdevicestatus ;
              fetch("/device/devicelendrecord/update" , {
                method:"POST",
                headers:{
                  "Content-Type": "application/json",
                },
                body:JSON.stringify(this.state.data[index])
              }).then(data=>data.json())
              .then(reuslt=>{
                  this.setState({data:[...this.state.data]})
                  Message({
                    type:reuslt.msg,
                    message:"操作成功"
                  })
              })
            }
          })
        })
      }
    
      approverLendRecord = (index)=>{
        MessageBox.msgbox({
          message:(
            <Form>
              <Form.Item label='申请事由'>
                <Input 
                type='textarea' 
                readOnly={true} 
                resize={"none"}
                size={"large"}
                autosize={{ minRows: 6, maxRows: 6}}
                value={this.state.data[index].msg}></Input>
              </Form.Item>
              <Form.Item label='意见'>
                <Select onChange={(e)=>{this.currdevicestatus = e }}>
                  <Select.Option label={"审批通过"} value={2}/>
                  <Select.Option label={ "驳回" } value={3}/>
                </Select>
              </Form.Item>
            </Form>
          ),
          showCancelButton:true
        }).then(action=>{
          if(action==="confirm") {
            fetch("/device/devicelendrecord/update" , {
              method:"POST",
              headers:{
                "Content-Type": "application/json",
              },
              body:JSON.stringify({
                id:this.state.data[index].id ,
                status: this.currdevicestatus 
              })
            }).then(data=>data.json())
            .then(reuslt=>{
                this.state.data[index].status = this.currdevicestatus ;
                this.setState({data:[...this.state.data]})
                Message({
                  type:reuslt.msg,
                  message:"操作成功"
                })
            })
          }
        })
      }

      pagechange = (currentPage)=>{
        fetch("/device/devicelendrecord/list",{
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({page:currentPage})
        }).then(data=>data.json())
        .then(result =>{
          this.setState({data:result.page.list , page :{
            total: result.page.totalPage,
            pageSize:  result.page.pageSize,
            currentPage: result.page.currPage,
          }})
    
        })
      }
    
    
      render() {
        return (
          <div>
            <Table
            style={{width: '100%'}}
            columns={this.state.columns}
            data={this.state.data}
            stripe={true}
            />
            <div className="block" style={{}}>
              <Pagination layout="prev, pager, next" 
              pageCount={this.state.page.total} 
              pageSize={this.state.page.pageSize}
              currentPage={this.state.page.currentPage}
              onCurrentChange={this.pagechange}/>
            </div>
          </div>
    
        )
      }
}
